<template>
  <view>
    <view class="todoor" v-if="send_type == 'shop'">
      <view class="address-box">
        <view>{{$t('admin.pickUp')}}</view>
        <view>
          <template v-if="shop.address">
            <view class="shop_address text-more-2">{{ shop.address }}</view>
            <view class="shop-distance">{{ shop.distance }}</view>
            <view
              class="selectShop flex-y-center flex-x-center"
              @click="toShowShopPopup"
              >{{ $t("common.choose") }}</view
            >
          </template>
          <template v-else>
            <view style="margin-right: 14rpx">{{
              $t("common.chooseStore")
            }}</view>
            <view
              class="selectShop flex-y-center flex-x-center"
              @click="toShowShopPopup"
              >{{ $t("common.choose") }}</view
            >
          </template>
        </view>
      </view>
      <view>
        <!-- <image
                    :src="asyncImgs.my.icon_right_3"
                    mode="aspectFit"
                ></image> -->
        <i
          class="iconfont icon-arrow-right"
          style="color: #cdcdcd; font-size: 22rpx"
        ></i>
      </view>
    </view>

    <view
      @click="toShowShopPopup"
      class="default-arrow flex-x-sb flex-y-center"
      v-else-if="send_list.indexOf('shop') != -1"
    >
      <view>{{$t('order.shopPick')}}</view>
      <view>
        <i
          class="iconfont icon-arrow-right"
          style="color: #262626; font-size: 22rpx"
        ></i>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    send_type: {
      type: String,
      default: "",
    },
    send_list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    shop: {
      type: [Object,String],
      default: () => {
        return {}
      },
    },
    index: {
      type: [String, Number],
      default: "",
    },
  },
  computed: {},
  filters: {},
  methods: {
    toShowShopPopup() {
      this.$emit("toShowShopPopup");
    },
    setShop(e) {
      this.$emit("switchChange", {
        value: e.detail.value,
        index: this.index,
        shop: this.shop,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.default-arrow {
  padding: 0 20rpx;
  height: 80rpx;
  border-radius: 16rpx;
  background: #f6f6f6;
  image {
    width: 12rpx;
    height: 20rpx;
  }
}
.todoor {
  margin: 30rpx 0;
  border-radius: 10rpx;
  background-color: #f6f6f6;
  padding: 24rpx 26rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .address-box {
    display: flex;
    flex: 1;
    color: #262626;
    font-size: 26rpx;
    > view:nth-child(1) {
      width: 80rpx;
    }
    > view:nth-child(2) {
      display: flex;
      width: 450rpx;
      margin-left: 20rpx;
      .shop_address {
        flex: 1;
      }
      .shop-distance {
        padding: 0 5rpx;
        min-width: 90rpx;
        font-weight: 700;
        text-align: center;
      }
      .selectShop {
        border: 1px solid #adadad;
        border-radius: 16rpx;
        font-size: 20rpx;
        padding: 5rpx 10rpx;
        height: 32rpx;
      }
    }
  }
  > view:last-child {
    image {
      width: 12rpx;
      height: 20rpx;
    }
  }
}
</style>
